<template>
	<view class="container">
		<image v-if="isLogin" class="icon" :src="baseUrl+data.icon" mode=""
		 style="width: 80px;height: 80px;border-radius: 50%;"></image>
		<image v-else class="icon" src="/static/uni.png" mode=""
		style="width: 80px;height: 80px;border-radius: 50%;"></image>
		<view v-if="isLogin" style="margin-top: 20px;" class="username">
			{{data.nickname}}
		</view>
		<button v-else type="primary" size="mini" @click="toLogin" 
		style="margin-top: 20px;">去登录</button>
		<view class="entry-container">
			<view class="entry">
				我的评论
			</view>
			<view class="entry">
				修改密码
			</view>
		</view>
		<button type="primary" @click="logout" size="default" style="width: 90%;">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				baseUrl: 'http://localhost:8090/foodapp',
				"data": {
					"id": 1,
					"username": "libai",
					"nickname": "李白",
					"password": "123",
					"telephone": "12345678901",
					"icon": "/images/1.png"
				}
			}
		},
		methods: {
			logout(){
				this.isLogin=false
				this.data={}
				uni.clearStorage()
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/my/login'
				});
			},
			loadUserInfo(){
				let userinfo = uni.getStorageSync("userinfo")
				if(userinfo){
					this.data-userinfo
					this.isLogin=true
				}else{
					this.isLogin=false
					this.data={}
				}
			}
		},
		onShow() {
			this.loadUserInfo()
		},
		onload() {
			this.loadUserInfo()
		}
	}
</script>
<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;

		.icon {
			margin-top: 30px;
		}

		.username {
			line-height: 40px;
			font-size: 24px;
		}
	}

	.entry-container {
		margin: 10px;
		width: 90%;
		padding: 10px;

		.entry {
			width: 100%;
			height: 40px;
			border-top: 1rpx solid #999;
			line-height: 40px;
			font-size: 18px;
			padding-left: 10px;
		}

		.entry:last-child {
			border-bottom: 1rpx solid #999;
		}
	}
</style>
